<template>
    <div class="activity-wrapper">
      <div class="title tc pf" ref="title" @click="$router.push({name:'name'})"><i class="pa back-icon"></i>解名</div>
      <div class="main-wrapper" ref="main">
        <!-- 填写信息 -->
        <div class="form-wrapper" v-show="showForm">
          <div class="form-box">
            <div class="row border-1px-top">
              <div class="label inline">您的姓名</div>
              <div class="item-wrapper inline">
                <input type="text" placeholder="请输入您的姓名" v-model="name">
              </div>
            </div>
            <div class="row border-1px-top">
              <div class="label inline">您的性别</div>
              <div class="item-wrapper inline">
                <span class="sex-circle inline" :class="{'active':sex === 'male'}" @click="sex = 'male'"></span>
                <span class="inline">男</span>
                <span class="sex-circle inline" :class="{'active':sex === 'female'}" @click="sex = 'female'"></span>
                <span class="inline">女</span>
              </div>
            </div>
            <div class="row border-1px-top">
              <div class="label inline">出生日期</div>
              <div class="item-wrapper inline time-picker">
                <input @click="openPicker" readonly v-model="birth" placeholder="请选择日期(阳历)"/>
              </div>
            </div>
            <div class="row border-1px-top">
              <div class="label inline">联系方式</div>
              <div class="item-wrapper inline">
                <input type="tel" placeholder="请输入您的手机号码" v-model="phoneNum" maxlength="11">
              </div>
            </div>
          </div>
          <div class="submit-btn" @click="showInfo"></div>
          <p class="tc tips"><span>温馨提示：</span>请准确填写您的真实信息，提交信息后我们会尽快与您联系。</p>
        </div>
        <!-- 提交信息 -->
        <div class="info-wrapper" v-show="showInformation">
          <div class="info-box">
            <p class="tc title">姓名信息</p>
            <div class="info-row border-1px-top">
              <div class="left inline">您的姓名</div>
              <div class="right inline">{{name}}</div>
            </div>
            <div class="info-row border-1px-top">
              <div class="left inline">您的性别</div>
              <div class="right inline">{{sex === "male" ? "男" : "女"}}</div>
            </div>
            <div class="info-row border-1px-top">
              <div class="left inline">出生日期</div>
              <div class="right inline">{{birth}}</div>
            </div>
            <div class="info-row border-1px-top">
              <div class="left inline">联系方式</div>
              <div class="right inline">{{phoneNum}}</div>
            </div>
          </div>
          <div class="confirm-btn" @click="showSuccess"></div>
          <p class="tc tips"><span>温馨提示：</span>请准确填写您的真实信息，提交信息后我们会尽快与您联系。</p>
        </div>
        <!-- 提交成功 -->
        <div class="success-wrapper" v-show="showSuccessBox">
          <div class="success-box tc">
            <img src="./success.png" alt="">
          </div>
        </div>
      </div>
      <div id="time-wrapper">
        <mt-datetime-picker
          @confirm="handleConfirm"
          :startDate=startDate
          :endDate=endDate
          v-model="pickerValue"
          ref="picker"
          type="date">
        </mt-datetime-picker>
      </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { DatetimePicker } from 'mint-ui'
    Vue.component(DatetimePicker.name, DatetimePicker)
    import 'mint-ui/lib/style.css'
    import AsyncJson from '@/common/js/async'
    import Toast from '@/common/js/toast'

    export default {
        name: "Activity",
        data() {
            return {
              startDate:new Date('1938'),
              endDate:new Date(),
              pickerValue:new Date(),
              name:"",
              phoneNum:"",
              sex:"male",
              birth:"",
              showForm:true,
              showInformation:false,
              showSuccessBox:false
            }
        },
        methods: {
          isLogin(){
            if(sessionStorage.getItem("loginFlag") !== "yes" || !sessionStorage.getItem("userId")){
              this.$router.push({name:"login",params:{to:'activity'}});
            }
          },
          setHeight(){
            this.$refs.main.style.height = document.documentElement.clientHeight - this.$refs.title.clientHeight + "px";
          },
          openPicker() {
            this.$refs.picker.open();
          },
          handleConfirm(val){
            this.birth = val.getFullYear() + "-" + (val.getMonth() + 1)  + "-" + val.getDate();
          },
          showInfo(){
            if(this.name.replace(/\s+/g,"") === "" || this.birth === "" || this.phoneNum.replace(/\s+/g,"") === ""){
              Toast("请将信息补充完整");
            }else{
              this.showForm = false;
              this.showInformation = true;
            }
          },
          showSuccess(){
            // ajax 提交信息
            AsyncJson("POST","event/neweventname",
              {
                name:this.name,
                mobilephone:this.phoneNum,
                userid:sessionStorage.getItem("userId"),
                sex:this.sex,
                birthday_year:this.birth.split("-")[0],
                birthday_month:this.birth.split("-")[1],
                birthday_day:this.birth.split("-")[2]
              }
            ).then((res) => {
              if(res.status === "000"){
                this.showInformation = false;
                this.showSuccessBox = true;
              }else{
                Toast(res.data);
              }
            }).catch((err) => {
              console.log(err);
            });
          }
        },
        created(){
          this.isLogin();
        },
        mounted(){
          this.setHeight();
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylu/index.styl"

  .activity-wrapper
    padding-top 100px
    .title
      top 0
      left 0
      z-index 9
      width 100%
      height 100px
      line-height 100px
      font-size 36px
      background #ffffff
      .back-icon
        top 0
        left 0
        width 80px
        height 100px
        background url("./back-icon.png") no-repeat center center
        background-size 20px 36px
    .main-wrapper
      background url("./bg.png") no-repeat center center
      background-size cover
      .tips
        width 833px
        font-size 20px
        color #828282
        transform scale(0.9)
        transform-origin left center
        span
          color #d30000
      .form-wrapper
        padding-top 75px
        .form-box
          width 680px
          height 544px
          padding-top 96px
          margin 0 auto 60px
          background url("./form-bg.png") no-repeat center center
          background-size cover
          input
            width 100%
            font-size 34px
            height 80px
            line-height 80px
            margin-top 25px
            border none
            outline none
            background none
            &::webkit-input-placeholder
              color #808080
          .row
            width 638px
            margin 0 auto
            font-size 0
            height 130px
            border-1px-top(#d8d8d8)
            .label
              font-size 34px
              width 240px
              padding-left 18px
              height 130px
              line-height 130px
            .item-wrapper
              width 370px
              font-size 0
              &.time-picker
                font-size 15px
              span
                font-size 34px
                height 34px
                line-height 34px
                margin 48px 56px 0 0
              .sex-circle
                width: 35px
                height: 35px
                margin 50px 28px 0 0
                border-radius 50%
                border: solid 1px #a5a5a5
                &.active
                  background url("./xuanzhong-1.png") no-repeat center center
                  background-size 20px 20px
        .submit-btn
          width: 400px
          height: 60px
          background url("./submit-btn.png") no-repeat center center
          background-size cover
          margin 60px auto 36px
      .info-wrapper
        padding-top 75px
        .info-box
          width 670px
          height 640px
          box-shadow: 0px 0px 9px 3px rgba(141,141,141,0.2)
          margin 0 auto 60px
          background #ffffff
          .title
            font-size 34px
            height 120px
            line-height 120px
          .info-row
            height 130px
            line-height 130px
            width 660px
            margin 0 auto
            font-size 0
            border-1px-top(#d8d8d8)
            .left
              width 240px
              padding-left 20px
              font-size 34px
            .right
              width 400px
              text-align center
              font-size 34px
        .confirm-btn
          width: 400px
          height: 60px
          background url("./confirm-info.png") no-repeat center center
          background-size cover
          margin 60px auto 36px
      .success-wrapper
        padding-top 75px
        .success-box
          width 670px
          height 640px
          margin 0 auto
          box-shadow: 0px 0px 9px 3px rgba(141,141,141,0.2)
          background #ffffff
          img
            width 280px
            margin-top 160px
</style>
